<template>
	<el-container>
		<el-main>
			<div class="card-container">
				<el-card v-for="tweet in tweets" :key="tweet.tid" class="card-item" @click="showDetailDialog(tweet)">
					<p style="color: gray;margin: -10px -10px -10px 10px;">活动编号：{{ tweet.tid }}</p>
					<br>
<img src="/img.png" class="card-image" alt="活动图片"/>
<!--					<img :src="tweet.url" class="card-image" alt="活动图片"/>-->
					<div class="card-content">
						<h3 class="card-title">{{ tweet.tname }}</h3>
						<p class="card-text">{{ tweet.type }} - {{ tweet.area }}</p>
						<p class="card-meta">
							<span class="card-department">{{ tweet.departmentName }}</span>
							<span class="card-time">{{ tweet.formattedDate }}发布</span>
						</p>
					</div>
				</el-card>
			</div>
		</el-main>

		<el-dialog v-model="detailDialogVisible" title="活动详细信息" width="50%">
			<div v-if="selectedTweet">
				<el-form :model="selectedTweet" label-width="120px">
					<el-form-item label="推文标题">
						<el-input v-model="selectedTweet.tname" readonly></el-input>
					</el-form-item>
					<el-form-item label="推文部门">
						<el-input v-model="selectedTweet.departmentName" readonly></el-input>
					</el-form-item>
					<el-form-item label="活动地点">
						<el-input v-model="selectedTweet.area" readonly></el-input>
					</el-form-item>
					<el-form-item label="活动时间">
						<el-input v-model="selectedTweet.atime" readonly></el-input>
					</el-form-item>
					<el-form-item label="活动介绍">
						<el-input type="textarea" v-model="selectedTweet.text" readonly></el-input>
					</el-form-item>
					<el-form-item label="审核状态">
						<el-input v-model="selectedTweet.tstate" readonly></el-input>
					</el-form-item>
					<el-form-item label="是否报名">
						<el-input v-model="selectedTweet.take" readonly></el-input>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
			</template>
		</el-dialog>
	</el-container>
</template>



<script>
import AxiosService from '@/plugins/Axios.js'
export default {
	data() {
		return {
			tweets: [],
			detailDialogVisible: false,
			selectedTweet: null, formattedDate: '' // 新增属性
		}
	},
	created() {
		this.fetchTweets();
	},
	methods: {
		async fetchTweets() {
			try {
				const response = await AxiosService.fetchAllArticles();
				this.tweets = await Promise.all(response.data.map(async tweet => {
					const departmentName = await this.fetchDepartment(tweet.did);
					const formattedDate = this.formatDate(tweet.atime); // 格式化日期
					return { ...tweet, departmentName, formattedDate };
				}));
			} catch (error) {
				console.error('获取推文列表出错:', error);
			}
		},

		formatDate(dateString) {
			const date = new Date(dateString);
			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		},
		async fetchDepartment(did) {
			try {
				const response = await AxiosService.fetchDepartment(did);
				return response.data.dname;
			} catch (error) {
				console.error('获取部门信息出错:', error);
				return '';
			}
		},
		showDetailDialog(tweet) {
			this.selectedTweet = tweet;
			this.detailDialogVisible = true;
		}
	}
}
</script>

<style scoped>
.card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.card-item {
	width: 450px;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.card-item:hover {
	transform: scale(1.02);
}

.card-image {
	width: 100%;
	max-height: 200px;
	min-width: 300px;
	max-width: 300px;
	min-height: 200px;
	object-fit: cover;
}

.card-content {
	padding: 16px;
}

.card-title {
	font-size: 18px;
	margin: 0 0 8px;
}

.card-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-bottom: -20px;
	justify-content: space-between;
	font-size: 14px;
	color: #888;
}

.card-time {
	flex: 1;
}

.card-department {
	flex: 1;
	text-align: right;
}

.card-text {
	margin-top: 8px;
}
</style>
